<script lang="ts">
import {vDraggable} from 'vue-draggable-plus'
export default {
  data(){
    const imgData = []
    for (let i = 1; i <= 9; i++) {
      imgData.push(`../../public/img/0${i}.jpg`)
    }
    return {
      imgData
    }
  },
  directives: {
    draggable:vDraggable
  }
}
</script>

<template>
  <div v-draggable="[imgData,{animation:100}]" class="img_box">
    <img :src="i" alt="" v-for="i in imgData" key="i">
  </div>
</template>

<style lang="scss" scoped>
.img_box {
  display: grid;
  grid-template-columns: repeat(3,100px);
  img {
    height: 100px;
    width: 100px;
    user-select: none;
  }
}
</style>